<template>
  <div>
    <van-nav-bar
      title="志愿者报名"
      class="title"
      left-arrow
      @click-left="onClickLeft"
    />
    <van-form @submit="onSubmit">
      <van-field
        v-model="user.name"
        name="姓名"
        label="姓名"
        placeholder="姓名"
        :rules="[{ required: true, message: '请填写姓名' }]"
      />
      <van-field
        v-model="user.idcard"
        type="number"
        name="身份证号"
        label="身份证号"
        placeholder="身份证号"
        :rules="[{ required: true, message: '请填写身份证号' }]"
      />
    
      <div style="margin: 16px">
        <van-button round block type="info" native-type="submit"
          >提交</van-button
        >
      </div>
    </van-form>
    <my-bottom :active="1"></my-bottom>
  </div>
</template>

<script>
import axios from "axios";
import { Toast } from "vant";
export default {
  data() {
    return {
      user: {
        name: "",
        idcard: "",
    
      },
    
      showPicker: false,
      showCalendar: false,
      uploader: [],
    };
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },

   
    onSubmit(values) {
      console.log("submit", values);
      axios
        .post("/api/zhiadd.php", {
          name: this.user.name,
          idcard: this.user.idcard,
        
        })
        .then((response)=> {
          console.log(response);
          Toast.success('添加成功');
          this.$router.go(-1);
        })
        .catch((error) =>{
          console.log(error);
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.title {
  background: #42a5f3;
}
>>> .van-nav-bar_title,
>>> .van-nav-bar_arrow {
  color: white;
}
</style>
